<template>
    <div class="play-list">
        <section class="pylst_header">
            <div class="headerTop">
                <div class="itemLeft">
                    <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
                    <span>歌单</span>
                </div>
                <div class="itemRight">
                    <svg class="icon sousuo" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-a-shuxing1a2sandianshuxiang"></use>
                    </svg>
                </div>
            </div>
            <!-- 背景 -->
            <div class="plhead_bg" :style="{
                backgroundImage: `url(${playlist.coverImgUrl})`,
            }"></div>
            <div class="plhead_wrap">
                <div class="head_fl">
                    <img :src="playlist.coverImgUrl" alt="" class="u-img" />
                    <span class="lsthd_icon">歌单</span>
                    <i class="iconfont icon-bofang u-earp lsthd_num">{{
                    playlist.playCount | playCountData
                    }}</i>
                </div>
                <div class="head_fr lsthd_fl">
                    <h2 class="f-thide2 f-brk lsthd_title">
                        {{ playlist.name }}
                    </h2>
                    <div class="lsthd_auth f-thide">
                        <a class="lsthd_link" v-if="playlist.creator">
                            <div class="u_avatar lsthd_ava">
                                <img :src="playlist.creator.avatarUrl" alt="" class="u-img" />
                            </div>
                            {{ playlist.creator.nickname }}
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <songcls :playlist="playlist"></songcls>
        <MusicList :songs="songsList"></MusicList>
        <loadMore v-show="songsList == ''"></loadMore>
    </div>
</template>

<script>
import { getsongItem, getsongListAllTheSongs } from "@/api/songitem";
import songcls from '@/components/Songcls.vue'
import MusicList from '@/components/MusicList.vue'
import loadMore from '@/components/LoadMore.vue'
export default {
    components: {
        MusicList,
        loadMore,
        songcls
    },
    data() {
        return {
            playlist: JSON.parse(sessionStorage.getItem('playlist')) || [],//接收歌单数据
            songsList: []//存储歌曲列表数据
        };
    },
    //播放量转换单位
    filters: {
        playCountData(value) {
            let val = Math.floor(value / 1000);
            let w = value > 10000 ? val / 10 + '万' : value; //万计算
            let y = w > 10000 ? parseInt(w / 10000) + "亿" : w; //亿计算
            return y;
        },
    },
    methods: {
        // 获取歌单详情
        getsongItemData() {
            getsongItem(this.$route.query.id).then((data) => {
                this.playlist = data.playlist;
                sessionStorage.setItem('playlist', JSON.stringify(this.playlist))
            });
        },
        // 获取歌单歌曲列表
        getsongListAllTheSongsFun() {
            getsongListAllTheSongs(this.$route.query.id).then(data => {
                this.songsList = data.songs
               
            })
        }

    },
    created() {
        this.getsongItemData();
        this.getsongListAllTheSongsFun()
    },
}
</script>


<style lang="scss" scoped>


.play-list {
position: relative;
  .pylst_header {
    position: relative;
    padding: 0px 10px 30px 15px;
    overflow: hidden;
    
    .headerTop {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .icon {
        font-size: 25px;
        fill: #fff;
      }
      .sousuo {
        margin-left: 20px;
      }
      
      .itemLeft,
      .itemRight {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        i{ 
            font-size: 25px;
            color: #fff;
        }
        span {
      
          font-size: 18px;
          color: #fff;
        }
      }
    }
    // 歌单头部背景
    .plhead_bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      filter: blur(20px);
    transform: scale(1.5);
        &::after {
            content: " ";
            background-color: rgba(0, 0, 0, 0.25);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 66;
        }
    }
    
    // 歌单头部背景里面的内容样式
    .plhead_wrap {
        display: flex;
        position: relative;
        z-index: 1;  
        .head_fl {
            width: 126px;
            height: 126px;
            position: relative;
        background-color: #e2e2e3;
            &::after {
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 18px;
                z-index: 2;
                background-image: linear-gradient(90deg,
                        rgba(0, 0, 0, 0),
                        rgba(0, 0, 0, 0.2));
            }
    
            .u-img {
                width: 100%;
                vertical-align: middle;
            }
    
            //歌单
            .lsthd_icon {
                position: absolute;
                z-index: 3;
                top: 10px;
                left: 0;
                padding: 0 8px;
                height: 17px;
                color: #fff;
                font-size: 9px;
                text-align: center;
                line-height: 17px;
                background-color: rgba(217, 48, 48, 0.8);
                border-top-right-radius: 17px;
                border-bottom-right-radius: 17px;
    
            }
    
            // 热度
            .lsthd_num {
                position: absolute;
                right: 2px;
                top: 2px;
                z-index: 3;
                padding-left: 15px;
                line-height: 15px;
                color: #fff;
                font-size: 12px;
                text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
            }
    
            .u-earp {}
        }
    
        .lsthd_fl {}
    
        .head_fr {
            flex: 1 1 auto;
            width: 1%;
            margin-left: 16px;
            padding-top: 3px;
    
            .lsthd_title {
                padding-top: 1px;
                font-size: 17px;
                line-height: 1.3;
                color: #fefefe;
                height: 44px;
                -webkit-box-pack: center;
            }
    
            .f-thide2 {
                overflow: hidden;
                text-overflow: ellipsis;
            }
    
            .f-brk {
                word-wrap: break-word;
                white-space: normal;
            }
    
            .lsthd_auth {
                display: block;
                position: relative;
            }
    
            .f-thide {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
    
                .lsthd_link {
                    display: inline-block;
                    font-size: 14px;
                    color: hsla(0, 0%, 100%, 0.7);
    
                    .u-avatar {
                        position: relative;
                        width: 100%;
                    }
    
                    .u-avatar>.u-img {}
    
                    .lsthd_ava {
                        display: inline-block;
                        width: 30px;
                        height: 30px;
    
                        vertical-align: middle;
                        margin-right: 5px;
    
                        .u-img {
                            width: 100%;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
    }
    }
    }
</style>